import React, { CSSProperties, FC, useEffect, useState } from 'react';

interface Iprops {
  src: string;
  scale?: number;
  style?: CSSProperties;
  className?: string;
  onClick?: Function;
}

const ImageComponent: FC<Iprops> = (props) => {
  const { src, scale = 1, style, onClick, className } = props;
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  useEffect(() => {
    const image = new Image();
    image.src = src;
    image.onload = () => {
      setWidth(image.width / scale);
      setHeight(image.height / scale);
    };
  }, [src]);
  return (
    <img
      className={className}
      src={src}
      style={{
        ...style,
        width,
        height,
      }}
      onClick={() => {
        onClick ? onClick() : null;
      }}
    />
  );
};

export default ImageComponent;
